<!DOCTYPE HTML>
<html>

<head>
    <title>用户登录/注册 - 二手电子乐园</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="二手电子乐园用户登录注册页面" />
    <link rel="stylesheet" href="assets/css/main.css" />
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css" />
    <style>
        .auth-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 2rem;
        }

        .auth-tabs {
            display: flex;
            margin-bottom: 2rem;
            border-bottom: 2px solid #e1e1e1;
        }

        .auth-tab {
            flex: 1;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            background: none;
            border: none;
            font-size: 1.1rem;
            color: #666;
            transition: all 0.3s ease;
        }

        .auth-tab.active {
            color: #e44c65;
            border-bottom: 2px solid #e44c65;
        }

        .auth-form {
            display: none;
        }

        .auth-form.active {
            display: block;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
            color: #333;
        }

        .form-group input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        .form-group input:focus {
            outline: none;
            border-color: #e44c65;
            box-shadow: 0 0 5px rgba(228, 76, 101, 0.3);
        }

        .btn-auth {
            width: 100%;
            padding: 1rem;
            background: #e44c65;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .btn-auth:hover {
            background: #d63851;
        }

        .auth-tips {
            margin-top: 1rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 4px;
            font-size: 0.9rem;
            color: #666;
        }
    </style>
</head>

<body class="is-preload" v-scope="{ currentTab: 'login', showMessage: false, message: '', messageType: 'success' }"
    v-cloak>
    <div id="page-wrapper">
        <div id="header-container"></div>

        <!-- Main Content -->
        <section id="main" class="wrapper style2">
            <div class="title">用户中心</div>
            <div class="container">
                <div class="auth-container">
                    <!-- 标签页切换 -->
                    <div class="auth-tabs">
                        <button class="auth-tab" :class="{ active: currentTab === 'login' }"
                            @click="currentTab = 'login'">
                            用户登录
                        </button>
                        <button class="auth-tab" :class="{ active: currentTab === 'register' }"
                            @click="currentTab = 'register'">
                            用户注册
                        </button>
                    </div>

                    <!-- 消息提示 -->
                    <div v-if="showMessage" :class="'alert alert-' + messageType"
                        style="padding: 1rem; margin-bottom: 1rem; border-radius: 4px; background: #d4edda; color: #155724; border: 1px solid #c3e6cb;">
                        {{ message }}
                    </div>

                    <!-- 登录表单 -->
                    <form class="auth-form" :class="{ active: currentTab === 'login' }" @submit.prevent="handleLogin">
                        <div class="form-group">
                            <label for="login-username">用户名/手机号</label>
                            <input type="text" id="login-username" name="username" required placeholder="请输入用户名或手机号" />
                        </div>
                        <div class="form-group">
                            <label for="login-password">密码</label>
                            <input type="password" id="login-password" name="password" required placeholder="请输入密码" />
                        </div>
                        <button type="submit" class="btn-auth">登录</button>
                        <div class="auth-tips">
                            <strong>测试账户：</strong><br>
                            用户名：zhangsan<br>
                            密码：66666666
                        </div>
                    </form>

                    <!-- 注册表单 -->
                    <form class="auth-form" :class="{ active: currentTab === 'register' }"
                        @submit.prevent="handleRegister">
                        <div class="form-group">
                            <label for="reg-username">用户名</label>
                            <input type="text" id="reg-username" name="username" required placeholder="请输入用户名" />
                        </div>
                        <div class="form-group">
                            <label for="reg-phone">手机号</label>
                            <input type="tel" id="reg-phone" name="phone" required placeholder="请输入手机号" />
                        </div>
                        <div class="form-group">
                            <label for="reg-email">邮箱</label>
                            <input type="email" id="reg-email" name="email" required placeholder="请输入邮箱地址" />
                        </div>
                        <div class="form-group">
                            <label for="reg-code">验证码</label>
                            <input type="text" id="reg-code" name="code" required placeholder="请输入验证码" />
                        </div>
                        <div class="form-group">
                            <label for="reg-password">密码</label>
                            <input type="password" id="reg-password" name="password" required placeholder="请输入密码" />
                        </div>
                        <div class="form-group">
                            <label for="reg-confirm">确认密码</label>
                            <input type="password" id="reg-confirm" name="confirm" required placeholder="请再次输入密码" />
                        </div>
                        <button type="submit" class="btn-auth">注册</button>
                        <div class="auth-tips">
                            注册后需要等待管理员审核，审核通过后即可正常使用平台功能。
                        </div>
                    </form>
                </div>
            </div>
        </section>

        <div id="footer-container"></div>
    </div>

    <!-- Scripts -->
    <script src="utils/loader.js"></script>
    <script>
        window.addEventListener('scriptsLoaded', function () {
            // 加载页头和页脚组件
            if (typeof fetchHtml !== 'undefined') {
                fetchHtml.fetchAll();
            }

            // 初始化 petite-vue
            if (typeof PetiteVue !== 'undefined') {
                PetiteVue.createApp({
                    currentTab: 'login',
                    showMessage: false,
                    message: '',
                    messageType: 'success',

                    handleLogin(e) {
                        const formData = new FormData(e.target);
                        const username = formData.get('username');
                        const password = formData.get('password');

                        // 测试账户验证
                        if (username === 'zhangsan' && password === '66666666') {
                            localStorage.setItem('isLogin', 'true');
                            localStorage.setItem('username', username);
                            this.showMessage = true;
                            this.message = '登录成功！即将跳转到首页...';
                            this.messageType = 'success';

                            setTimeout(() => {
                                window.location.href = 'index.html';
                            }, 2000);
                        } else {
                            this.showMessage = true;
                            this.message = '用户名或密码错误，请重试';
                            this.messageType = 'error';
                            setTimeout(() => {
                                this.showMessage = false;
                            }, 3000);
                        }
                    },

                    handleRegister(e) {
                        const formData = new FormData(e.target);
                        const password = formData.get('password');
                        const confirm = formData.get('confirm');

                        if (password !== confirm) {
                            this.showMessage = true;
                            this.message = '两次输入的密码不一致，请重新输入';
                            this.messageType = 'error';
                            setTimeout(() => {
                                this.showMessage = false;
                            }, 3000);
                            return;
                        }

                        // 模拟注册成功
                        this.showMessage = true;
                        this.message = '注册申请已提交，请等待管理员审核。审核通过后我们会通过邮件通知您。';
                        this.messageType = 'success';

                        // 清空表单
                        e.target.reset();
                    }
                }).mount();
            }
        });
    </script>
</body>

</html>